<template>
    <div class="edge-container">
        <div class="edge-action">
            <div class="item-header">
                <svg-icon name="bpm-bind" width="16px" height="16px" color=var(--el-text-color-secondary) />
                <div class="item-title">动作绑定</div>
            </div>
            <div class="item-content">
                <el-select v-model="nodeData.businessData.prop.actionCode" placeholder="请选择" :disabled="props.isRead" style="width: 240px" @change="actionChange">
                    <el-option v-for="(item, index) in props.startNodeActions" :key="index" :label="`${item.actionName} - ${item.actionCode}`"
                        :value="item.actionCode" />
                </el-select>
                <div style="display:inline-block; margin-left: 10px;">
                    <el-tag type="danger" v-if="nodeData.businessData.prop.isCurrNodeAction==1" disable-transitions>本节点</el-tag>
                    <el-tag type="success" v-else disable-transitions>流转</el-tag>
                </div>
            </div>
        </div>
        <div class="edge-setting">
            <div class="item-header">
                <svg-icon name="bpm-attributeSetting" width="16px" height="16px" color=var(--el-text-color-secondary) />
                <div class="item-title">属性设置</div>
            </div>
            <div class="item-content">
                <div class="system-set">
                    <div>
                        <span class="hdTitle">优先级</span>
                        <el-input v-model="nodeData.businessData.prop.priority" style="width: 240px" :disabled="props.isRead"/>
                    </div>
                    <div style="margin-left: 60px;">
                        <span class="hdTitle">描述</span>
                        <el-input v-model="nodeData.businessData.prop.actionDesc" style="width: 240px" :disabled="props.isRead"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="edge-setting" style="height: calc(100% - 232px);">
            <div class="item-header">
                <svg-icon name="bpm-condition" width="16px" height="16px" color=var(--el-text-color-secondary) />
                <div class="item-title">流转流转</div>
            </div>
            <div class="item-content" style="height: calc(100% - 46px);">
                <tab-check ref="refTurn" :initMsg="nodeData.businessData.turnAround" :isRead="props.isRead" style="height: 100%;"/>
            </div>
            <!-- <div class="item-content">
                <div class="lfCon1">
                    <el-checkbox v-model="nodeData.businessData.isCommonTurn"  class="lfCon1-item" :disabled="props.isRead">通用</el-checkbox>
                    <dept-common 
                        pageSrc="edgeTurn"
                        :isRead="props.isRead" 
                        :isCheck="nodeData.businessData.isCommonTurn" 
                        :itemCheck="nodeData.businessData.commonTurn" 
                        :options1="options1" 
                        @changeCheck="changeCheck1" 
                        @saveRiskBusiness="saveRiskBusiness1"
                        @changeSpeCheckType="changeSpeCheckType1"
                        @saveClassName="saveClassName1"
                    />
                </div>
                <div class="lfCon1">
                    <div>
                        <el-checkbox v-model="nodeData.businessData.isDirectTurn" class="lfCon1-item" :disabled="props.isRead">指定部门</el-checkbox>
                        <ul style="margin-left: 22px;" v-if="nodeData.businessData.isDirectTurn">
                            <li v-for="(item,index) in deptList" :key="index">
                                <el-checkbox v-model="item.isCheck" class="lfCon1-item" :disabled="props.isRead">{{ item.name }}</el-checkbox>
                                <dept-common 
                                    pageSrc="edgeTurn"
                                    :isRead="props.isRead" 
                                    :isCheck="item.isCheck" 
                                    :itemCheck="item.itemCheck" 
                                    :options1="options1" 
                                    :index="index"
                                    @changeCheck="changeCheck2" 
                                    @saveRiskBusiness="saveRiskBusiness2"
                                    @changeSpeCheckType="changeSpeCheckType2"
                                    @saveClassName="saveClassName2"
                                />
                            </li>
                        </ul>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import type { NodeDataType, StartNodeActionType } from './index.vue';
// import useDictStore from '@/store/modules/dict';
// import DeptCommon from './checkDeptCommon.vue';
import tabCheck from './edge/tabCheck.vue';

const props = defineProps({
    isRead: {
        type: Boolean,
        default: false,
    },
    startNodeActions: {
        type: Array as PropType<StartNodeActionType[]>,
        default: () => []
    }
})

// let dictStore = useDictStore();
const nodeData = inject('nodeData', ref<NodeDataType>({
    id: null,
    type: null,
    typeName: null,
    code: null,
    name: null,
    position: { x: 0, y: 0 },
}));
// const flowDefBusinessData = inject('flowDefBusinessData',ref());
// const actionList = ref([
//     {
//         label: '同意',
//         value: 'agree',
//     },
//     {
//         label: '退回',
//         value: 'reject',
//     },
// ])
const actionChange = (val: string) => {
    const obj = props.startNodeActions.find((item: any) => item.actionCode === val)
    // console.log('选中的节点：',val, obj,props.startNodeActions);
    if (obj) {
        nodeData.value.businessData.prop.actionName = obj.actionName;
        nodeData.value.businessData.prop.isCurrNodeAction = obj.isCurrNodeAction;
        nodeData.value.businessData.prop.actionDesc = obj.actionName;
    }
}
// // 审核类型
// const changeSpeCheckType1 = (msg: any)=>{
//     nodeData.value.businessData.commonTurn.dictSpeCheckType = msg.val;
// }
// const changeSpeCheckType2 = (msg: any)=>{
//     deptList.value[msg.index].itemCheck.dictSpeCheckType = msg.val;
// }
// const saveRiskBusiness1 = (msg:any)=>{
//     nodeData.value.businessData.commonTurn.forRiskBusinessId = msg.val.id; 
//     nodeData.value.businessData.commonTurn.riskBusinessName = msg.val.name;   
// }
// const saveRiskBusiness2 = (msg:any)=>{
//     deptList.value[msg.index].itemCheck.forRiskBusinessId = msg.val.id; 
//     deptList.value[msg.index].itemCheck.riskBusinessName = msg.val.name;   
// }
// const saveClassName1 = (msg:any)=>{
//     nodeData.value.businessData.commonTurn.className = msg.val;
//     // console.log('方法：',msg.val);
// }
// const saveClassName2 = (msg:any)=>{
//     deptList.value[msg.index].itemCheck.className = msg.val;
// }
// // 审核人
// const changeCheck1 = (msg:any)=>{   
//     nodeData.value.businessData.commonTurn.dictSpeCheckor = msg.val;
//     nodeData.value.businessData.commonTurn.forRiskBusinessId = null;
//     nodeData.value.businessData.commonTurn.riskBusinessName = null;
//     nodeData.value.businessData.commonTurn.className = '';
// }
// const changeCheck2 = (msg: any)=>{
//     deptList.value[msg.index].itemCheck.dictSpeCheckor = msg.val;
//     deptList.value[msg.index].itemCheck.forRiskBusinessId = null;
//     deptList.value[msg.index].itemCheck.riskBusinessName = null;
//     deptList.value[msg.index].itemCheck.className = '';
// }

// const options1 = ref<any[]>([]);
// const deptList = ref<any[]>([]);

// async function initializeData() {
    // console.log('边初始数据：',nodeData.value.businessData, flowDefBusinessData);
    // try {
    //     if (nodeData.value.businessData.turnAround) {
        // options1.value = dictStore.dicts.SPE_CHECK_TYPE.list;
        // const deptListOld = dictStore.dicts.DEPT_CFG_CATEGORY.list;
        // if (deptListOld && deptListOld.length > 0) {
        //     deptList.value = deptListOld
        //         .filter((item: any) => parseInt(item.code) > 0)
        //         .map((item: any) => ({
        //             name: item.name,
        //             code: item.code,
        //             isCheck: false,
        //             itemCheck: {
        //                 dictSpeCheckType: '1',
        //                 forRiskBusinessId: '',
        //                 riskBusinessName: '',
        //                 className: '',
        //             }
        //         }));

        //     if (nodeData.value.businessData.directTurns && nodeData.value.businessData.directTurns.length > 0) {
        //         nodeData.value.businessData.directTurns.forEach((item: any) => {
        //             const matchedDept = deptList.value.find(dept => dept.code === item.dictDeptCfgCategory);
        //             if (matchedDept) {
        //                 matchedDept.isCheck = true;
        //                 matchedDept.itemCheck = {
        //                     ...matchedDept.itemCheck,
        //                     ...item
        //                 };
        //             }
        //         });
        //     }
        // }
    // } catch (error) {
    //     console.error('Error initializing data:', error);
    // }
// }
// onMounted(async ()=> {
//     initializeData();
// })
// watch(flowDefBusinessData, () => {
//     initializeData();
// }, { deep: true });

// watch(nodeData, () => {
//     initializeData();
// }, { deep: true });

const isInfoPass = ref(true);
const allNotChecked = ref(true);

const refTurn = ref();
const saveCurrentTabData = () => {
    nodeData.value.businessData.turnAround = refTurn.value.save() || {}
}

const doCheck = () => {
    // isInfoPass.value = true;
    // if(nodeData.value.businessData.isCommonTurn){
    //     if( !nodeData.value.businessData.commonTurn.forRiskBusinessId && 
    //         !nodeData.value.businessData.commonTurn.className
    //     ){
    //         isInfoPass.value = false;
    //         ElMessage.error('通用存在未完善的信息！');
    //         return
    //     }
    // }
    // if(nodeData.value.businessData.isDirectTurn){
    //     allNotChecked.value = true; // 假设所有部门都没有被选中
    //     for (let i = 0; i < deptList.value.length; i++) {
    //         if (deptList.value[i].isCheck) {
    //             allNotChecked.value = false; // 如果有一个部门被选中，则设置为false
    //             if (!deptList.value[i].itemCheck.forRiskBusinessId && 
    //                 !deptList.value[i].itemCheck.className
    //             ) {
    //                 isInfoPass.value = false;
    //                 break;
    //             }
    //         }
    //     }
    //     if (allNotChecked.value || !isInfoPass.value) {
    //         ElMessage.error('指定部门存在未完善的信息！');
    //         return
    //     }
    // }
}
const doSave = () => {
    nodeData.value.name = nodeData.value.businessData.prop.actionDesc;
    nodeData.value.code = nodeData.value.businessData.prop.actionCode;
    saveCurrentTabData();
    // nodeData.value.businessData.directTurns = deptList.value
    //     .filter(item => item.isCheck)
    //     .map(item => ({
    //         dictDeptCfgCategory: item.code,
    //         dictSpeCheckType: item.itemCheck.dictSpeCheckType,
    //         forRiskBusinessId: item.itemCheck.forRiskBusinessId,
    //         riskBusinessName: item.itemCheck.riskBusinessName,
    //         className: item.itemCheck.className,
    //     }));
}
defineExpose({
    isInfoPass, allNotChecked, doCheck, doSave
});
</script>
<style scoped lang="scss">
.edge-container {
    padding: 10px 0;
    height: 100%;
    .item-header {
        display: flex;
        margin: 10px 0 0 0;
        align-items: center;

        .item-title {
            font-weight: 600;
            color: var(--el-text-color-primary);
            margin-left: 8px;
            font-size: 14px;
        }
    }

    .item-content {
        margin: 20px 0 0 20px;
    }

    .edge-setting {
        margin-top: 40px;
    }

    .system-set {
        font-size: 13px;
        margin: 20px 0 10px;
        display: flex;

        div {
            width: 230px;
            display: inline-grid;
            grid-gap: 10px;

            .hdTitle {
                font-size: 13px;
                margin-right: 15px;
                width: 40px;
                font-weight: 600;
                text-align: left;
            }
        }
    }
}

.con1 {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;

    .con1-item {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }
}
</style>
